<template>
  <div class="manual" v-loading="loading" element-loading-text="保存配置中，请稍后..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <el-switch style="display: block;margin-bottom: 15px;" v-model="qtFlag" :active-value="1" :inactive-value="0"
      active-color="#13ce66" inactive-color="#ff4949" active-text="投料启动" inactive-text="投料停止" @change="saveConfig">
    </el-switch>
    <!-- 一托一 -->
    <div class="manualMode" v-if="tapFlag.indexOf('A') != -1">
      <div class="module1 module">
        <div class="item item isBtn" :class="flagObj['A'].materielFlag == 'A' ? 'chooseStyle' : ''"
          @click="chooseMateriel('A', 'A')">
          <span>选择A料</span>
        </div>
        <div class="item item isBtn" :class="flagObj['A'].materielFlag == 'B' ? 'chooseStyle' : ''"
          @click="chooseMateriel('A', 'B')">
          <span>选择B料</span>
        </div>
        <div class="item item2 isBtn activate" :class="flagObj['A'].activate == 1 ? 'chooseStyle' : ''"
          @click="activate('A')">
          <span>A塘工作</span>
        </div>
      </div>
      <div class="module2 module">
        <div class="item item4 disable-cursor">
          <span>投料</span>
        </div>
      </div>
      <div class="module3 module">
        <div class="item item">
          <span>A料目标量</span>
          <el-input-number v-model="formData['R30']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>B料目标量</span>
          <el-input-number v-model="formData['R36']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>A料给料时间</span>
          <el-input-number v-model="formData['R32']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料时间</span>
          <el-input-number v-model="formData['R34']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
      <div class="module4 module">
        <div class="item item"><span>A料投料时间</span>
          <el-input-number v-model="formData['R37']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>B料投料时间</span>
          <el-input-number v-model="formData['R38']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>A料给料间隔</span>
          <el-input-number v-model="formData['R33']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料间隔</span>
          <el-input-number v-model="formData['R35']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
    </div>
    <!-- 一托二 -->
    <div class="manualMode" v-if="tapFlag.indexOf('C') != -1">
      <div class="module1 module">
        <div class="item item isBtn" :class="flagObj['C'].materielFlag == 'A' ? 'chooseStyle' : ''"
          @click="chooseMateriel('C', 'A')">
          <span>选择A料</span>
        </div>
        <div class="item item isBtn" :class="flagObj['C'].materielFlag == 'B' ? 'chooseStyle' : ''"
          @click="chooseMateriel('C', 'B')">
          <span>选择B料</span>
        </div>
        <div class="item item4 isBtn activate" :class="flagObj['C'].activate == 1 ? 'chooseStyle' : ''"
          @click="activate('C')">
          <span>C塘工作</span>
        </div>
      </div>
      <div class="module2 module">
        <div class="item item4 isBtn" :class="flagObj['C'].takeFoodFlag == 'BEILIAO' ? 'chooseStyle' : ''"
          @click="takeFood('C', 'BEILIAO')"><span>备料</span></div>
        <div class="item item2 isBtn" :class="flagObj['C'].takeFoodFlag == 'TOULIAO' ? 'chooseStyle' : ''"
          @click="takeFood('C', 'TOULIAO')"><span>投料</span></div>
      </div>
      <div class="module3 module">
        <div class="item item"><span>A料目标量</span>
          <el-input-number v-model="formData['R1054']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>B料目标量</span>
          <el-input-number v-model="formData['R1056']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>A料给料时间</span>
          <el-input-number v-model="formData['R284']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料时间</span>
          <el-input-number v-model="formData['R286']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>目标量</span>
          <el-input-number v-model="formData['R332']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>AB料给料时间</span>
          <el-input-number v-model="formData['D160']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
      <div class="module4 module">
        <div class="item item"><span>A料投料时间</span>
          <el-input-number v-model="formData['R1055']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>B料投料时间</span>
          <el-input-number v-model="formData['R1057']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>A料给料间隔时间</span>
          <el-input-number v-model="formData['R285']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料间隔时间</span>
          <el-input-number v-model="formData['R287']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>投料时间</span>
          <el-input-number v-model="formData['D128']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>AB料给料间隔</span>
          <el-input-number v-model="formData['D161']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
    </div>
    <!-- 一托三 -->
    <div class="manualMode" v-if="tapFlag.indexOf('D') != -1">
      <div class="module1 module">
        <div class="item item isBtn" :class="flagObj['D'].materielFlag == 'A' ? 'chooseStyle' : ''"
          @click="chooseMateriel('D', 'A')">
          <span>选择A料</span>
        </div>
        <div class="item item isBtn" :class="flagObj['D'].materielFlag == 'B' ? 'chooseStyle' : ''"
          @click="chooseMateriel('D', 'B')">
          <span>选择B料</span>
        </div>
        <div class="item item4 isBtn activate" :class="flagObj['D'].activate == 1 ? 'chooseStyle' : ''"
          @click="activate('D')">
          <span>D塘工作</span>
        </div>
      </div>
      <div class="module2 module">
        <div class="item item4 isBtn" :class="flagObj['D'].takeFoodFlag == 'BEILIAO' ? 'chooseStyle' : ''"
          @click="takeFood('D', 'BEILIAO')"><span>备料</span></div>
        <div class="item item2 isBtn" :class="flagObj['D'].takeFoodFlag == 'TOULIAO' ? 'chooseStyle' : ''"
          @click="takeFood('D', 'TOULIAO')"><span>投料</span></div>
      </div>
      <div class="module3 module">
        <div class="item item"><span>A料目标量</span>
          <el-input-number v-model="formData['R1058']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>B料目标量</span>
          <el-input-number v-model="formData['R1060']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>A料给料时间</span>
          <el-input-number v-model="formData['R288']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料时间</span>
          <el-input-number v-model="formData['R290']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>目标量</span>
          <el-input-number v-model="formData['R333']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">Kg</div>
        </div>
        <div class="item item"><span>AB料给料时间</span>
          <el-input-number v-model="formData['D164']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
      <div class="module4 module">
        <div class="item item"><span>A料投料时间</span>
          <el-input-number v-model="formData['R1059']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>B料投料时间</span>
          <el-input-number v-model="formData['R1061']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>A料给料间隔时间</span>
          <el-input-number v-model="formData['R289']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>B料给料间隔时间</span>
          <el-input-number v-model="formData['R291']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
        <div class="item item"><span>投料时间</span>
          <el-input-number v-model="formData['D129']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">分</div>
        </div>
        <div class="item item"><span>AB料给料间隔</span>
          <el-input-number v-model="formData['D165']" :min="0" :max="65535" label="请输入"></el-input-number>
          <div class="unit">秒</div>
        </div>
      </div>
    </div>
    <div class="saveConfig">
      <el-button type="primary" size="mini" icon="el-icon-download" :loading="loading"
        @click="saveConfig">保存配置</el-button>
      <span style="padding: 0 20px;" v-show="setTime">系统配置{{ setTime }}秒...</span>
    </div>
  </div>
</template>
<script>
import { number } from 'echarts';
import manualMode from './manualMode.json';
import FeedingEquipmentApi from "@/api/feeding-manegement/feeding-equipment";
export default {
  name: "manualMode",
  props: {
    tapFlag: {
      type: String,
      default: () => {
        return ''
      },
    },
    switchFlag: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    manualModeData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    deviceId: {
      type: String,
      default: () => {
        return ''
      },
    },
    feedMachineId: {
      type: Number,
      default: () => {
        return null
      },
    },
  },
  data() {
    return {
      formData: {},
      flagObj: {},
      setTime: 0,
      loading: false,
      qtFlag: 0,
    };
  },
  computed: {},
  watch: {
    switchFlag(v) {
      v && this.initData(this.manualModeData);
    }
  },
  created() {
  },
  mounted() {
    this.qtFlag = Number(this.manualModeData['M23'] || 0)
    console.log(this.manualModeData)
    this.initData(this.manualModeData);
  },
  methods: {
    //保存配置；
    saveConfig() {
      console.log(this.deviceId)
      console.log(this.qtFlag)
      let flag = Number(this.formData['M21']) || Number(this.formData['M174']) || Number(this.formData['M175'])
      if (this.qtFlag == 1 && !flag) {
        this.$message.warning("请选择工作状态'A塘工作'或'C塘工作'或'D塘工作'")
        this.qtFlag = 0
        return
      }
      this.loading = true;
      this.setTimeCount();
      FeedingEquipmentApi.saveConfig({
        deviceId: this.deviceId,
        payload: { ...this.formData, 'M23': this.qtFlag }
      }).then(res => {
        if (res && res.success) {
          setTimeout(() => {
            this.loading = false
            clearInterval(this.time); this.setTime = 0;
            this.queryConfigByCondition();
            this.$message.success('保存成功');
          }, 6000);
        } else {
          this.loading = false
          clearInterval(this.time); this.setTime = 0;
          this.$message.warning('保存失败')
        }
      }).catch(err => {
        this.loading = false
        clearInterval(this.time); this.setTime = 0;
        this.$message.warning('保存失败')
      })
    },
    setTimeCount() {
      this.time = setInterval(() => {
        this.setTime++;
      }, 1000);
    },
    //获取配置数据项
    queryConfigByCondition() {
      if (!this.feedMachineId) {
        this.$message.warning('请先获取投料机Id');
      } else {
        FeedingEquipmentApi.queryConfigByFeedMachineId({ feedMachineId: this.feedMachineId }).then(res => {
          console.log('获取配置项目', res.data)
          if (res && res.data) {
            this.initData(res.data || {});
          } else {
            this.initData({});
          };
        })
      }
    },
    //初始化数据
    initData(manualModeData = {}) {
      let aKye = this.tapFlag.indexOf('A') != -1 ? manualMode['A'] : {};
      let cKye = this.tapFlag.indexOf('C') != -1 ? manualMode['C'] : {};
      let dKye = this.tapFlag.indexOf('D') != -1 ? manualMode['D'] : {};
      let manualKey = { ...aKye, ...cKye, ...dKye };
      this.formData = {};
      this.$set(this, 'flagObj', JSON.parse(JSON.stringify(manualMode['config'])))
      for (let key in manualKey) {
        this.$set(this.formData, key, Number(manualModeData[key] || 0))
      }
      for (let key in this.flagObj) {
        let a_m_key = this.flagObj[key].A_materiel;
        let b_m_key = this.flagObj[key].B_materiel;
        let b_t_key = this.flagObj[key].BEILIAO_takeFood;
        let t_t_key = this.flagObj[key].TOULIAO_takeFood;
        let a_key = this.flagObj[key].activateKey;

        this.flagObj[key].materielFlag = '';
        this.flagObj[key].takeFoodFlag = '';
        this.flagObj[key].activate = Number(this.formData[a_key] || 0) ? 1 : 0;
        if (Number(this.formData[a_m_key] || 0) == 1) {
          this.flagObj[key].materielFlag = 'A'
        } else if (Number(this.formData[b_m_key] || 0) == 1) {
          this.flagObj[key].materielFlag = 'B'
        }
        if (Number(this.formData[b_t_key] || 0) == 1) {
          this.flagObj[key].takeFoodFlag = 'BEILIAO'
        } else if (Number(this.formData[t_t_key] || 0) == 1) {
          this.flagObj[key].takeFoodFlag = 'TOULIAO'
        }
      }
      // this.formData
    },
    /**
     * 
     * @param {String} fishPondFlag  鱼塘标识
     * @param {String} materielFlag 鱼饲料标识
     */
    chooseMateriel(fishPondFlag, materielFlag) {
      if (materielFlag == this.flagObj[fishPondFlag].materielFlag) {
        this.flagObj[fishPondFlag].materielFlag = ''
      } else {
        this.flagObj[fishPondFlag].materielFlag = materielFlag
      };
      this.getTeekFeedStatus(fishPondFlag, 'materiel')
      this.getKey();
    },

    /**
     * 
     * @param {String} fishPondFlag 鱼塘标识
     * @param {String} takeFoodFlag 操作状态  BEILIAO：备料  TOULIAO：投料
     */
    takeFood(fishPondFlag, takeFoodFlag) {
      console.log(fishPondFlag, takeFoodFlag)
      //isNeedTakeFlag标记是否选择过备料或者投料
      let isNeedTakeFlag = this.flagObj[fishPondFlag].takeFoodFlag ? true : false;
      console.log(fishPondFlag, isNeedTakeFlag)
      if (takeFoodFlag == this.flagObj[fishPondFlag].takeFoodFlag) {
        this.flagObj[fishPondFlag].takeFoodFlag = ''
      } else {
        this.flagObj[fishPondFlag].takeFoodFlag = takeFoodFlag
      };
      this.getTeekFeedStatus(fishPondFlag, 'takeFood')
      this.getKey();
    },

    /**
     * 
     * @param {String} flag //鱼塘工作按钮 
     */


    activate(fishPondFlag) {
      let takeFoodFlag = this.flagObj[fishPondFlag].takeFoodFlag
      let materielStatus = this.flagObj[fishPondFlag].materielFlag ? 1 : 0;
      let takeFoodStatus = takeFoodFlag ? 1 : 0;
      console.log(fishPondFlag, materielStatus, takeFoodStatus, takeFoodFlag)
      let status = false
      let notA = fishPondFlag !== 'A';
      console.log(takeFoodFlag == 'TOULIAO' && notA)
      if (takeFoodFlag == 'TOULIAO' && notA) {
        status = true;
      } else if (notA) {
        status = materielStatus && takeFoodStatus;
      } else {
        status = materielStatus;
      }
      if (status) {
        if (this.flagObj[fishPondFlag]['activate'] == 1) {
          this.flagObj[fishPondFlag]['activate'] = 0;
        } else if (this.flagObj[fishPondFlag]['activate'] == 0) {
          this.flagObj[fishPondFlag]['activate'] = 1;
        } else {
          this.flagObj[fishPondFlag]['activate'] = 0;
        };
        this.getTeekFeedStatus(fishPondFlag, 'activate');
        this.getKey();
      } else {
        if (!materielStatus) {
          this.$message.warning('请选择' + fishPondFlag + '塘的A/B料！');
          return
        }
        if (!takeFoodStatus) {
          this.$message.warning('请选择' + fishPondFlag + '塘的备料或者投料！');
          return
        }
      }
    },
    getTeekFeedStatus(fishPondFlag, operatingState) {
      if (operatingState == 'activate') { //工作
        for (let key in this.flagObj) {
          let isChooseFishPond = key !== fishPondFlag; //是否是当前选中的塘
          let isBEILIAO = this.flagObj[key].takeFoodFlag == 'BEILIAO'; //其它备料
          let activate = this.flagObj[key].activate; //其他塘工作状态
          //选择工作时除正在投料的塘状态不发生改变，其它都重置
          if (isChooseFishPond && isBEILIAO) {
            this.flagObj[key].takeFoodFlag = '';
            this.flagObj[key].activate = isBEILIAO ? 0 : activate;
          }
        }
      } else if (operatingState == 'takeFood') {  //投料/备料
        let isBEILIAO = this.flagObj[fishPondFlag].takeFoodFlag == 'BEILIAO'; //当前当是备料
        let isNull = !this.flagObj[fishPondFlag].takeFoodFlag; //没有选择备料或者投料
        if (isBEILIAO) {
          this.flagObj['A'].activate = 0;
        }
        for (let key in this.flagObj) {
          let isChooseFishPond = key !== fishPondFlag; //是否是当前选中的塘
          let isOtherBEILIAO = this.flagObj[key].takeFoodFlag == 'BEILIAO'; // 其它塘是备料
          let takeFoodflag = this.flagObj[key].takeFoodFlag; //投料状态
          let activate = this.flagObj[key].activate; //塘工作状态
          //选择备料时除自身工作状态不发生改变其他塘工作状态取消
          if (isChooseFishPond && isBEILIAO && isOtherBEILIAO) {
            this.flagObj[key].takeFoodFlag = '';
            this.flagObj[key].activate = 0;
          }
          if (!isChooseFishPond && isNull) {
            this.flagObj[key].activate = 0
          }
        }
      } else if (operatingState == 'materiel') { //选择投料类型
        if (!this.flagObj[fishPondFlag].materielFlag) {
          this.flagObj[fishPondFlag].activate = 0
        }
      }
    },
    /**
     * 获取Kye对应参数
     */
    getKey() {
      for (let key in this.flagObj) {
        let obj = this.flagObj[key]
        let mKye = this.flagObj[key].materielFlag;
        let tKye = this.flagObj[key].takeFoodFlag;
        let aKye = this.flagObj[key].activateKey;
        if (mKye == 'A') {
          this.formData[obj['A_materiel']] = 1;
          this.formData[obj['B_materiel']] = 0;
        } else if (mKye == 'B') {
          this.formData[obj['A_materiel']] = 0;
          this.formData[obj['B_materiel']] = 1;
        } else {
          this.formData[obj['A_materiel']] = 0;
          this.formData[obj['B_materiel']] = 0;
        };
        if (tKye == 'BEILIAO') {
          this.formData[obj['BEILIAO_takeFood']] = 1;
          this.formData[obj['TOULIAO_takeFood']] = 0;
        } else if (tKye == 'TOULIAO') {
          this.formData[obj['BEILIAO_takeFood']] = 0;
          this.formData[obj['TOULIAO_takeFood']] = 1;
        } else {
          this.formData[obj['BEILIAO_takeFood']] = 0;
          this.formData[obj['TOULIAO_takeFood']] = 0;
        };
        this.formData[aKye] = obj['activate'];
      };
    },
  }
};
</script>
<style lang="scss" scoped>
.manual {
  width: 100%;
}

.isBtn {
  background: #f3f3f3;
  transition: all 0.2s;
}

.isBtn:hover {
  background: #e6e6e6;
  color: #666666 !important;
}

.manualMode {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  border: 1px solid #68acdd;
  padding: 1px;
  background: #c0e5ff;

  .module {
    height: 100%;
    margin-bottom: 5px;
    padding: 1px;
    background: #ffffff;
  }

  .module1 {
    width: 20%;
  }

  .module2 {
    width: 10%;
  }

  .module3,
  .module4 {
    width: 35%;
  }

  .item {
    width: 100%;
    height: 36px;
    font-size: 18px;
    color: #333;
    line-height: 36px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    border: 1px solid #68acdd;

    span {
      display: inline-block;
      width: 150px;
    }

    .unit {
      width: 50px;
      text-align: center;
    }
  }

  .item2 {
    height: 72px;
  }

  .item3 {
    height: 108px;
  }

  .item4 {
    height: 144px;
  }

  .chooseStyle {
    background: rgb(159, 217, 231) !important;
  }

  .activate {
    background: #f8f8f8;
  }
}

.saveConfig {
  margin-top: 2px;
}

.disable-cursor {
  cursor: not-allowed !important;
}

::v-deep .el-input-number--medium {
  margin: 3px 0;
}

::v-deep .el-input-number--medium,
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase,
::v-deep .el-input--medium .el-input__inner {
  line-height: 26px !important;
}

::v-deep .el-input--medium .el-input__inner {
  height: 28px !important;
}
</style>
